<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        let usrObj = {uname:'悟空',age:100,tel:123};
 
        //es5写法：
        // let x = usrObj.uname,
        //     y = usrObj.age,
        //     z = usrObj.tel;
        // console.log(x,y,z); 

        //对象解构赋值语法：let {模式} = {对象}

        //1、对象完全解构赋值：
        //完整形式：
       // let {uname:x,age:y,tel:z} = usrObj;
       // console.log(x,y,z,'x,y,z');

       //let {uname:uname,age:age,tel:tel} = usrObj;
       //console.log(uname,age,tel,'uname,age,tel');

       //简写形式：
       let {uname,age,tel} = usrObj;
       console.log(uname,age,tel,'uname,age,tel...');

       //2、对象不完全解构赋值：
       let {y,z} = {x:11,y:100,z:'Hello'}
       console.log(y,z);

       //3、解构失败：解构失败时的默认值为undefined
       let {price,id} = {gname:'小米手机',price:3000};
       console.log(price,id,'price,id');  //3000 undefined

       //4、默认值：
      let  {usr='李四',uid=11} = {usr:'张三',age:20};
       console.log(usr,uid,'usr,uid');  //张三 11

       //5、对象嵌套解构赋值：
       let obj3 = {tst:[1,2,{f:'Hello',d:99},'OK']};
       let {tst:[,c,{d},v]} = obj3
       console.log(c,d,v);

    </script>
</head>
<body>
    
</body>
</html>